<template>
  <div class="accessories-info-container">
    <div class="search-box">
      <van-dropdown-menu active-color="#3378FF">
        <van-dropdown-item
          v-model="category"
          :options="categoryOption"
          @change="changeCategory"
        />
      </van-dropdown-menu>
      <form
        action="/"
        class="form-search"
      >
        <van-search
          v-model="searchKey"
          shape="round"
          placeholder="搜索配件名称/物料编号"
          @search="getModelAccessories"
          @clear="getModelAccessories"
        />
      </form>
    </div>

    <ul
      class="record-list scroll-box"
      v-if="accessoriesList.length"
    >
      <li
        v-for="item in accessoriesList"
        :key="item.id"
        @click="openDetail(item)"
      >
        <div class="item-left">
          <img :src="item.image || require('@/assets/images/device_default.png')">
        </div>
        <div class="item-right">
          <div class="item-right-top">
            <span class="item-name">{{ item.name }}</span>
            <p class="item-type">{{ item.from === 1 ? '自制' : '外协' }}</p>
          </div>
          <div class="item-right-bottom">
            <span>物料编号：{{ item.number }}</span>
            <span>更换频次：{{ item.replaceNumber }}</span>
          </div>
        </div>
      </li>
    </ul>

    <div
      class="no-data-box"
      v-if="noDataStatus"
    >暂无数据</div>

    <!-- 配件详情 -->
    <van-popup v-model="showDetail">
      <div class="detail-box">
        <div class="detail-top">
          <div class="detail-title">
            <span>{{ detail.name }}</span>
            <span>{{ detail.from === 1 ? '自制' : '外协' }}</span>
          </div>
          <div class="detail-img">
            <img :src="detail.image || require('@/assets/images/device_default.png')">
          </div>
          <ul class="detail-info">
            <li>
              <span class="tag-name">物料编号</span>
              <span class="tag-text">{{ detail.number }}</span>
            </li>
            <li>
              <span class="tag-name">更换频次</span>
              <span class="tag-text">{{ detail.replaceNumber }}</span>
            </li>
            <li>
              <span class="tag-name">一级分类</span>
              <span class="tag-text">{{ detail.oneTypeName }}</span>
            </li>
            <li>
              <span class="tag-name">二级分类</span>
              <span class="tag-text">{{ detail.twoTypeName }}</span>
            </li>
          </ul>
        </div>
        <div
          class="close-detail-btn border-top"
          @click="closeDetail"
        >关闭</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Search, DropdownMenu, DropdownItem, Popup } from 'vant';
import { getModelAccessories } from '@/api/deviceManage.js';

export default {
  name: 'AccessoriesInfo',
  components: {
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Popup.name]: Popup
  },
  data() {
    return {
      category: '',
      searchKey: '',
      categoryOption: [
        {
          text: '全部类型',
          value: ''
        },
        {
          text: '自制',
          value: 1
        },
        {
          text: '外协',
          value: 2
        }
      ],
      accessoriesList: [],
      noDataStatus: false,
      showDetail: false,
      detail: {}
    };
  },
  created() {
    this.getModelAccessories();
  },
  methods: {
    // 获取配件信息
    getModelAccessories() {
      getModelAccessories({
        id: this.$route.query.modelId,
        keyword: this.searchKey,
        from: this.category
      }).then(res => {
        this.accessoriesList = res.data || [];
        if (!this.accessoriesList.length) {
          this.noDataStatus = true;
        }
      });
    },
    // 切换类型
    changeCategory(value) {
      this.category = value;
      this.getModelAccessories();
    },
    // 打开详情
    openDetail(item) {
      this.detail = item;
      this.showDetail = true;
    },
    // 关闭详情
    closeDetail() {
      this.showDetail = false;
      setTimeout(() => {
        this.detail = {};
      }, 300);
    }
  }
};
</script>

<style lang="scss" scoped>
.accessories-info-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .search-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 1.44rem;
    border-bottom: 1px solid var(--border-color);

    .van-dropdown-menu {
      height: 100%;
      background-color: #fff;

      ::v-deep .van-dropdown-menu__bar {
        height: 100%;
        box-shadow: unset;
      }
    }

    .van-search {
      flex: 1;
    }
  }

  .record-list {
    flex: 1;
    padding-bottom: 0.213333rem;

    li {
      display: flex;
      align-items: center;
      margin-top: 0.213333rem;
      padding: 0.426667rem;
      background-color: #fff;

      .item-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.706667rem;
        height: 1.28rem;
        padding: 0.186667rem 0.266667rem;
        border: 1px solid #ebeef5;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .item-right {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 0.32rem;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 1px;
          height: 100%;
          background-color: var(--border-color);
        }

        .item-right-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.266667rem;

          .item-name {
            font-size: 0.4rem;
          }

          .item-type {
            flex-shrink: 0;
            padding: 0.053333rem 0.106667rem;
            color: #abca54;
            font-size: 0.32rem;
            border: 1px solid #abca54;
            border-radius: 100em;
          }
        }

        .item-right-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.346667rem;
          color: var(--color-deep-gray);
        }
      }
    }
  }

  .van-popup--center {
    border-radius: 0.426667rem;

    .detail-box {
      display: flex;
      flex-direction: column;
      width: 8.266667rem;
      padding-top: 0.426667rem;

      .detail-top {
        padding: 0 0.426667rem;

        .detail-title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            &:first-of-type {
              line-height: 0.533333rem;
              font-size: 0.426667rem;
            }

            &:last-of-type {
              flex-shrink: 0;
              margin-left: 0.266667rem;
              padding: 0.053333rem 0.106667rem;
              color: #abca54;
              font-size: 0.32rem;
              border: 1px solid #abca54;
              border-radius: 100em;
            }
          }
        }

        .detail-img {
          width: 100%;
          height: 5.6rem;
          margin-top: 0.533333rem;
          padding: 0.906667rem 1.173333rem;
          border: 1px solid #ebeef5;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .detail-info {
          margin-top: 0.106667rem;

          li {
            display: flex;
            padding: 0.32rem 0;
            font-size: 0.373333rem;
            border-bottom: 1px solid var(--border-color);

            &:last-of-type {
              border-bottom: 0;
            }

            .tag-name {
              margin-right: 0.426667rem;
              color: var(--color-gray);
            }

            .tag-text {
            }
          }
        }
      }

      .close-detail-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 1.28rem;
        margin-top: 0.32rem;
        color: var(--color-primary);
        font-size: 0.48rem;
      }
    }
  }
}
</style>